<template>
  <a-spin :spinning="loading">
    <a-form v-bind="formItemLayout">
      <a-row>
        <a-col :span="24">
          <a-form-item label="会员ID" v-bind="validateInfos.memberId">
            <a-input v-model:value="formData.memberId" placeholder="请输入会员ID" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="会员名称" v-bind="validateInfos.name">
            <a-input v-model:value="formData.name" placeholder="请输入会员名称" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="联系方式" v-bind="validateInfos.phone">
            <a-input v-model:value="formData.phone" placeholder="请输入联系方式" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="头像" v-bind="validateInfos.avatar">
	          <j-image-upload  v-model:value="formData.avatar" :disabled="disabled"></j-image-upload>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="性别：0-未知，1-男，2-女" v-bind="validateInfos.sex">
            <j-dict-select-tag type='radio' v-model:value="formData.sex" dictCode="sex" placeholder="请选择性别：0-未知，1-男，2-女" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="最高学历" v-bind="validateInfos.education">
	          <j-dict-select-tag v-model:value="formData.education" dictCode="education" placeholder="请选择最高学历" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="开始工作时间" v-bind="validateInfos.timeToWork">
		        <a-date-picker placeholder="请选择开始工作时间" v-model:value="formData.timeToWork" value-format="YYYY-MM-DD"  style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="工作年限" v-bind="validateInfos.workYear">
            <a-input v-model:value="formData.workYear" placeholder="请输入工作年限" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="出生日期" v-bind="validateInfos.birthday">
		        <a-date-picker placeholder="请选择出生日期" v-model:value="formData.birthday" value-format="YYYY-MM-DD"  style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="薪资要求" v-bind="validateInfos.salaryLow">
            <a-input v-model:value="formData.salaryLow" placeholder="请输入薪资要求" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="薪资要求" v-bind="validateInfos.salaryUp">
            <a-input v-model:value="formData.salaryUp" placeholder="请输入薪资要求" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="期望薪资，如10-20K" v-bind="validateInfos.expectSalary">
	          <j-dict-select-tag v-model:value="formData.expectSalary" dictCode="expect_salary" placeholder="请选择期望薪资，如10-20K" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="所属公司" v-bind="validateInfos.company">
            <a-input v-model:value="formData.company" placeholder="请输入所属公司" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="公司职位" v-bind="validateInfos.postId">
	          <a-input-number v-model:value="formData.postId" placeholder="请输入公司职位" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="个人特长" v-bind="validateInfos.personalSkill">
            <a-input v-model:value="formData.personalSkill" placeholder="请输入个人特长" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="技能标签" v-bind="validateInfos.skills">
            <a-input v-model:value="formData.skills" placeholder="请输入技能标签" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="有限地址" v-bind="validateInfos.email">
            <a-input v-model:value="formData.email" placeholder="请输入有限地址" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="求职状态" v-bind="validateInfos.jobStatus">
	          <j-dict-select-tag v-model:value="formData.jobStatus" dictCode="job_status" placeholder="请选择求职状态" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="浏览数量" v-bind="validateInfos.browseNumber">
	          <a-input-number v-model:value="formData.browseNumber" placeholder="请输入浏览数量" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否启用" v-bind="validateInfos.status">
            <a-input v-model:value="formData.status" placeholder="请输入是否启用" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="排序" v-bind="validateInfos.sort">
	          <a-input-number v-model:value="formData.sort" placeholder="请输入排序" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" v-bind="validateInfos.remark">
            <a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="tenantId" v-bind="validateInfos.tenantId">
	          <a-input-number v-model:value="formData.tenantId" placeholder="请输入tenantId" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="删除状态(0-正常,1-已删除)" v-bind="validateInfos.delFlag">
	          <a-input-number v-model:value="formData.delFlag" placeholder="请输入删除状态(0-正常,1-已删除)" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

		<!-- 子表单区域 -->
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane tab="项目经历" key="wmsProExp" :forceRender="true">
        <j-vxe-table
          :keep-source="true"
          ref="wmsProExpTableRef"
          :loading="wmsProExpTable.loading"
          :columns="wmsProExpTable.columns"
          :dataSource="wmsProExpTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"/>
      </a-tab-pane>
      <a-tab-pane tab="工作经历" key="wmsWorkExp" :forceRender="true">
        <j-vxe-table
          :keep-source="true"
          ref="wmsWorkExpTableRef"
          :loading="wmsWorkExpTable.loading"
          :columns="wmsWorkExpTable.columns"
          :dataSource="wmsWorkExpTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"/>
      </a-tab-pane>
      <a-tab-pane tab="教育经历" key="wmsEduExp" :forceRender="true">
        <j-vxe-table
          :keep-source="true"
          ref="wmsEduExpTableRef"
          :loading="wmsEduExpTable.loading"
          :columns="wmsEduExpTable.columns"
          :dataSource="wmsEduExpTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"/>
      </a-tab-pane>
      <a-tab-pane tab="工作经历" key="wmsJobExpect" :forceRender="true">
        <j-vxe-table
          :keep-source="true"
          ref="wmsJobExpectTableRef"
          :loading="wmsJobExpectTable.loading"
          :columns="wmsJobExpectTable.columns"
          :dataSource="wmsJobExpectTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"/>
      </a-tab-pane>
      <a-tab-pane tab="简历附件" key="wmsResumeFile" :forceRender="true">
        <j-vxe-table
          :keep-source="true"
          ref="wmsResumeFileTableRef"
          :loading="wmsResumeFileTable.loading"
          :columns="wmsResumeFileTable.columns"
          :dataSource="wmsResumeFileTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"/>
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, computed, toRaw } from 'vue';
  import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods';
  import { queryWmsProExpListByMainId, queryWmsWorkExpListByMainId, queryWmsEduExpListByMainId, queryWmsJobExpectListByMainId, queryWmsResumeFileListByMainId, queryDataById, saveOrUpdate } from '../WmsResume.api';
  import { JVxeTable } from '/@/components/jeecg/JVxeTable';
  import {wmsProExpColumns, wmsWorkExpColumns, wmsEduExpColumns, wmsJobExpectColumns, wmsResumeFileColumns} from '../WmsResume.data';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
  import { Form } from 'ant-design-vue';
  const useForm = Form.useForm;

  export default defineComponent({
    name: "WmsResumeForm",
    components:{
      JDictSelectTag,
      JImageUpload,
      JVxeTable,
    },
    props:{
      disabled:{
        type: Boolean,
        default: false
      }
    },
    emits:['success'],
    setup(props, {emit}) {
      const loading = ref(false);
      const wmsProExpTableRef = ref();
      const wmsProExpTable = reactive<Record<string, any>>({
        loading: false,
        columns: wmsProExpColumns,
        dataSource: []
      });
      const wmsWorkExpTableRef = ref();
      const wmsWorkExpTable = reactive<Record<string, any>>({
        loading: false,
        columns: wmsWorkExpColumns,
        dataSource: []
      });
      const wmsEduExpTableRef = ref();
      const wmsEduExpTable = reactive<Record<string, any>>({
        loading: false,
        columns: wmsEduExpColumns,
        dataSource: []
      });
      const wmsJobExpectTableRef = ref();
      const wmsJobExpectTable = reactive<Record<string, any>>({
        loading: false,
        columns: wmsJobExpectColumns,
        dataSource: []
      });
      const wmsResumeFileTableRef = ref();
      const wmsResumeFileTable = reactive<Record<string, any>>({
        loading: false,
        columns: wmsResumeFileColumns,
        dataSource: []
      });
      const activeKey = ref('wmsProExp');
      const formData = reactive<Record<string, any>>({
        id: '',
        memberId: '',
        name: '',
        phone: '',
        avatar: '',
        sex: '',
        education: '',
        timeToWork: '',
        workYear: '',
        birthday: '',
        salaryLow: '',
        salaryUp: '',
        expectSalary: '',
        company: '',
        postId: '',
        personalSkill: '',
        skills: '',
        email: '',
        jobStatus: '',
        browseNumber: '',
        status: '',
        sort: '',
        remark: '',
        tenantId: '',
        delFlag: '',
      });

      //表单验证
      const validatorRules = reactive({
      });
      const {resetFields, validate, validateInfos} = useForm(formData, validatorRules, {immediate: true});
      const dbData = {};
      const formItemLayout = {
        labelCol: {xs: {span: 24}, sm: {span: 5}},
        wrapperCol: {xs: {span: 24}, sm: {span: 16}},
      };

      const formDisabled = computed(() => {
        return props.disabled;
      });

      function add() {
        resetFields();
        wmsProExpTable.dataSource = [];
        wmsWorkExpTable.dataSource = [];
        wmsEduExpTable.dataSource = [];
        wmsJobExpectTable.dataSource = [];
        wmsResumeFileTable.dataSource = [];
      }

      async function edit(row) {
        //主表数据
        await queryMainData(row.id);
        //子表数据
        const wmsProExpDataList = await queryWmsProExpListByMainId(row['id']);
        wmsProExpTable.dataSource = [...wmsProExpDataList];
        const wmsWorkExpDataList = await queryWmsWorkExpListByMainId(row['id']);
        wmsWorkExpTable.dataSource = [...wmsWorkExpDataList];
        const wmsEduExpDataList = await queryWmsEduExpListByMainId(row['id']);
        wmsEduExpTable.dataSource = [...wmsEduExpDataList];
        const wmsJobExpectDataList = await queryWmsJobExpectListByMainId(row['id']);
        wmsJobExpectTable.dataSource = [...wmsJobExpectDataList];
        const wmsResumeFileDataList = await queryWmsResumeFileListByMainId(row['id']);
        wmsResumeFileTable.dataSource = [...wmsResumeFileDataList];
      }

      async function queryMainData(id) {
        const row = await queryDataById(id);
        Object.keys(row).map(k => {
          formData[k] = row[k];
        });
      }

      const {getSubFormAndTableData, transformData} = useValidateAntFormAndTable(activeKey, {
        'wmsProExp': wmsProExpTableRef,
        'wmsWorkExp': wmsWorkExpTableRef,
        'wmsEduExp': wmsEduExpTableRef,
        'wmsJobExpect': wmsJobExpectTableRef,
        'wmsResumeFile': wmsResumeFileTableRef,
      });

      async function getFormData() {
        await validate();
        return transformData(toRaw(formData))
      }

      async function submitForm() {
        const mainData = await getFormData();
        const subData = await getSubFormAndTableData();
        const values = Object.assign({}, dbData, mainData, subData);
        console.log('表单提交数据', values)
        const isUpdate = values.id ? true : false
        await saveOrUpdate(values, isUpdate);
        //关闭弹窗
        emit('success');
      }
      
      function setFieldsValue(values) {
        if(values){
          Object.keys(values).map(k=>{
            formData[k] = values[k];
          });
        }
      }

      /**
       * 值改变事件触发-树控件回调
       * @param key
       * @param value
       */
      function handleFormChange(key, value) {
        formData[key] = value;
      }


      return {
        wmsProExpTableRef,
        wmsProExpTable,
        wmsWorkExpTableRef,
        wmsWorkExpTable,
        wmsEduExpTableRef,
        wmsEduExpTable,
        wmsJobExpectTableRef,
        wmsJobExpectTable,
        wmsResumeFileTableRef,
        wmsResumeFileTable,
        validatorRules,
        validateInfos,
        activeKey,
        loading,
        formData,
        setFieldsValue,
        handleFormChange,
        formItemLayout,
        formDisabled,
        getFormData,
        submitForm,
        add,
        edit
      }
    }
  });
</script>